<template>
    <h4 style="color: red;">{{ msg }}</h4>
    <h4>萧炎的修炼伴侣的数量：{{ count }}</h4>
    <p style="font-size: 18px;">改变后的伴侣：{{ username }}</p>
    <button @click="btncount()">增加</button>
    <h4 v-once>永久单身的是：{{ username }}</h4>
    <button @click="username='美杜莎'">改变username的名字</button>
    <button @click="onUserChange">改变username的名字</button>
    <hr>
    <h2>梦想的修炼伴侣</h2>
    <p style="color: black;">姓名：{{ obj.name }}</p>
    <div>年龄：{{ obj.age }}</div>
    <!--三元云算符 判断？'':''-->
    <p style="color: black;">判断年龄是否成年：{{ obj.age >=18 ? '成年':'未成年' }}</p>
    <button @click="obj.age++">增加年龄</button> &nbsp;
    <button @click="obj.age--">减少年龄</button>
</template>
<script>
export default {
    data() { 
        return {
            msg: '展示v-once指令的作用 只执行渲染一次',
            count: 0,
            username: '萧炎',
            obj: {
                name: '萧薰儿',
                age: 20
            }
        }
    },
    methods: {
        //固定写函数的地方
        btncount(){ 
            //对count的数值加加
           this.count++
        },
        onUserChange() { 
            this.username='小医仙'
        }
    }

}
</script>
<style >
    
</style>